<template>
    <div class="permissions">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="20">
                        <div>
                            <span class="border-left"></span>
                            权限管理
                        </div>
                    </Col>
                    <Col :span="4">
                        <div class="back">
                            <span class="back-btn" @click="back">
                                <Icon type="ios-arrow-back" />
                                返回
                            </span>
                            
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <div class="card-add">
                    <div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
                        <div class="ivu-card-head">
                            <p data-v-57b29fc1="">当前角色：{{name}}</p>
                        </div>
                        <div class="ivu-card-body"> 
                            <div class="table-box">
                                <el-checkbox
                                    class="check-all"
                                    :indeterminate="isIndeterminate" 
                                    v-model="checkAll" 
                                    @change="handleCheckAllChange">最高权限
                                </el-checkbox>
                                <el-checkbox-group
                                    class="check-group"
                                    v-model="openPermissions" 
                                    @change="handleCheckedCitiesChange">
                                    <el-checkbox
                                        class="check-one"
                                        v-for="item in Permissions" 
                                        :label="item.value" 
                                        :key="item.value">{{item.label}}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </div>

                            <div class="save-box">
                                <div class="save-btn" @click="save">保存</div>
                            </div>
                        </div>
                    </div>
                </div>
            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
    
</template>

<script>
    import * as api from '@/api/api'
    export default {
        data(){
            return {
                host: window.location.host,
                loading: this.$store.state,
                checkAll: false,
                isIndeterminate: true,
                Permissions:[
                    {label:'系统首页',value:'0-1'},
                    {label:'用户列表',value:'1-1'},
                    {label:'代理列表',value:'1-2'},
                    // {label:'服务列表',value:'2-1'},
                    {label:'视频列表',value:'3-1'},
                    {label:'视频审核',value:'3-2'},
                    {label:'订单列表',value:'4-1'},
                    {label:'提现审核',value:'5-1'},
                    // {label:'充值记录',value:'5-2'},
                    {label:'合伙人总览',value:'6-1'},
                    {label:'区域代理人总览',value:'6-4'},
                    {label:'个人代理总览',value:'6-01'},
                    {label:'角色管理',value:"7-4"},
                    {label:'添加成员',value:"7-5"},
                    // {label:'成员管理',value:"7-6"},
                    {label:'权限管理',value:"7-7"},
                    {label:'banner管理',value:"8-1"},
                    {label:'平台设置',value:"8-3"},
                    {label:'系统通知管理',value:"8-4"}
                ],
                openPermissions: [],
                id: null,
                name: null,
            }
        },
        mounted(){
            this.getRoleData();
        },

        computed: {

        },

        watch: {
            
        },
        
        methods: {
            back() {
                this.$router.back();
            },
            getRoleData() {
                if(this.$route.params.roleId) {
                    this.id = this.$route.params.roleId;
                    this.name = this.$route.params.name;
                    if(this.$route.params.auth_ids) {
                        let arr = this.$route.params.auth_ids.split(',');
                        this.openPermissions = arr;
                    }
                }else {
                    this.$router.push({name:'Role'})
                }
            },
            handleCheckAllChange(val) {
                // this.openPermissions = val ? Permissions : [];
                if(val){
                    for (let i = 0; i < this.Permissions.length; i++) {
                        this.openPermissions.push(this.Permissions[i].value)
                    }
                }else{
                    this.openPermissions = [];
                }
                this.isIndeterminate = false;
                // console.log(val)
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                console.log(value)
                this.checkAll = checkedCount === this.Permissions.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.Permissions.length;
            },
            save() {
                let str = '';
                str = this.openPermissions.join(',');
                let body = {
                    model: 'Roles',
                    data: {
                        auth_ids:str
                    },
                    update_condition: {
                        id: this.id
                    }
                };
                this.submitLoading = true;
                api.createData(body).then(res => {
                    if(res.data.code === 200) {
                        this.$Notice.success({
                            title: '提示',
                            desc: '恭喜你，保存成功！'
                        });
                        this.$router.back();
                    }else{
                        this.$Notice.error({
                            title: '错误',
                            desc: '保存失败'
                        });
                    }
                    this.submitLoading = false;
                }).catch(err => {
                    this.submitLoading = false;
                    this.$Notice.error({
                        title: '错误',
                        desc: `服务器错误(${err})`
                    });
                })
            }
        }
    }
</script>


<style lang="less">
    @import '../../../assets/styles/constant.less';
    .permissions{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
            .back{
                text-align: right;
                color: #999;
                .back-btn{
                    cursor: pointer;
                    background-color: #fff;
                    padding: 6px 10px;
                    border: 1px solid #ddd;
                }
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .card-add{
                margin-top: 20px;
                .ivu-card-head{
                    background-color: #f2f2f2;
                }
                .ivu-card-body{
                    .table-box{
                        width: 100%;
                        padding: 10px;
                        .check-all{
                            width: 100%;
                            padding: 20px 10px;
                            border-right: 1px solid #ebeef5;
                            border-top: 1px solid #ebeef5;
                            border-left: 1px solid #ebeef5;
                            background-color: #F9FAFC;
                        }
                        .check-group{
                            display: flex;
                            flex-wrap: wrap;
                            border: 1px solid #ebeef5;
                            border-bottom: none;
                            border-right: none;
                            .check-one{
                                width: 20%;
                                padding: 20px 10px;
                                border-right: 1px solid #ebeef5;
                                border-bottom: 1px solid #ebeef5;
                                margin: 0;
                            }
                            .check-one:nth-of-type(5n){
                                // border-right: none;
                            }
                        }
                    }
                    .save-box {
                        text-align: right;
                    }
                    .save-btn{
                        width: 100px;
                        height: 32px;
                        display: inline-block;
                        line-height: 32px;
                        text-align: center;
                        background-color: @greenColor;
                        border-radius: 4px;
                        color: #fff;
                        cursor: pointer;
                    }
                }
                
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>